<template>
  <div>
    <a-row>
      <a-col>
        <a-input v-model="userName" style="width: 200px;" placeholder="请输入用户姓名" allowClear />
        <a-button type="primary" style="margin-left: 20px;" @click="addUser">新增</a-button>
      </a-col>
    </a-row>
    <a-table
      :loading="isLoading"
      :columns="columns"
      :data-source="dataList"
      style="padding: 40px;"
      bordered
      :rowKey="
        (record, index) => {
          return index;
        }
      "
    >
      <template slot="title">
        用户信息
      </template>
      <span slot="name" slot-scope="text, record">
        <span @click="changename(record)">{{ record.name }}</span>
      </span>
      <span slot="operate" slot-scope="text, record">
        <a-button type="danger" @click="delUser(record)">删除</a-button>
      </span>
    </a-table>

    <a-modal
      title="修改姓名"
      :visible="isShow"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-input type="primary" v-model="selectObj.name" placeholder="请输入姓名"></a-input>
    </a-modal>
  </div>
</template>
<script>
import {
  addUser,
  delUser,
  searchUser,
  updateUser
} from '@/api/user.js'
export default {
  data () {
    return {
      confirmLoading: false,
      selectObj: {
        id: '',
        name: ''
      },
      isShow: false,
      isLoading: false,
      dataList: [],
      userName: '',
      columns: [
        {
          dataIndex: 'id',
          title: '编号',
          slots: { title: 'id' },
          scopedSlots: { customRender: 'id' }
        },
        {
          dataIndex: 'name',
          title: '姓名',
          slots: { title: 'name' },
          scopedSlots: { customRender: 'name' }
        },
        {
          dataIndex: 'operate',
          title: '操作',
          slots: { title: 'operate' },
          scopedSlots: { customRender: 'operate' }
        }
      ]
    }
  },
  mounted () {
    this.searchUserMethod()
  },
  methods: {
    async searchUserMethod () {
      this.isLoading = true
      const res = await searchUser()
      this.dataList = res.data.result
      this.isLoading = false
    },
    delUser (item) {
      const _this = this
      this.$confirm({
        title: '确认',
        content: '确定删除？',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          await delUser({ id: item.id })
          _this.searchUserMethod()
        }
      })
    },
    async addUser () {
      if (!this.userName.trim()) return this.$message.info('请输入姓名！！！')

      this.isLoading = true
      const params = {
        name: this.userName
      }
      await addUser(params)
      this.userName = ''
      this.searchUserMethod()
      this.isLoading = false
    },
    changename (obj) {
      this.selectObj = obj
      this.isShow = true
    },
    async handleOk () {
      if (!this.selectObj.name.trim()) this.$message.info('请输入新的姓名！！！')
      this.confirmLoading = true

      const params = {
        name: this.selectObj.name,
        id: this.selectObj.id
      }
      await updateUser(params)
      this.selectObj.name = ''
      this.searchUserMethod()
      this.isShow = false
      this.confirmLoading = false
    },
    handleCancel () {
      this.isShow = false
    }
  }
}
</script>
